﻿<template>
  <div :class="mask">
    <Rotate @initCaptcha="initCaptcha" @close="close" :captcha="captcha" v-if="type === 'ROTATE'"/>
    <Slider @initCaptcha="initCaptcha" @close="close" :captcha="captcha" v-if="type === 'SLIDER'"/>
    <RotateDegree @initCaptcha="initCaptcha" @close="close" :captcha="captcha" v-if="type === 'ROTATE_DEGREE'"/>
    <Concat @initCaptcha="initCaptcha" @close="close" :captcha="captcha" v-if="type === 'CONCAT'"/>
    <WordOrderImageClick @initCaptcha="initCaptcha" @close="close" :captcha="captcha" v-if="type === 'WORD_ORDER_IMAGE_CLICK'"/>
  </div>
</template>
<script>
import Rotate from './Rotate'
import Slider from './Slider'
import RotateDegree from './RotateDegree'
import Concat from './Concat'
import WordOrderImageClick from './WordOrderImageClick'
import { drawBgImage } from './captcha'
import { getCodeImg } from '@/api/login'
export default {
  components:{ WordOrderImageClick, Concat, RotateDegree, Slider, Rotate},
  props:{
    username:String,
  },
  data() {
    return {
      mask:"",
      type:"",
      captcha:{}
    }
  },
  methods: {
    initCaptcha(){
      getCodeImg(this.username).then(res=>{
        if(res){
          this.type = "";
          this.mask = "mask";
          this.captcha = {...(res.captcha), id:res.id};

          Promise.resolve().then(()=>{//保证顺序执行
            this.type = res.captcha.type;
          }).then(()=>{
            // 重组
            drawBgImage(this.captcha, "canvasId", "imgId", 5);
          })
        }
      })
    },
    close(msg){
      this.mask = "";
      this.$emit("close", msg);
    },
  },
  mounted() {
    this.initCaptcha();
  }
}
</script>
<style scoped>
.mask{
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.3);
  transition: all 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
